<template>
  <div class="hr-container container">
    <VmGoodsText :title="['爆款推荐']"
    :moreHref="{}"/>
    <ul>
        <VmGoodsCard width="472px" height="306px" 
        style="margin-right: 8px"
        class="goods__card-hover">
            <template #fullyCustom>
                <a :href="hotData.hrefUrl">
                    <img :src="hotData.imgUrl" 
                    style="width: 100%; height: 100%; background-size: cover;"/>
                </a> 
            </template>
        </VmGoodsCard>
        <a :href="item.hrefUrl" v-for="item in goodsData" :key="item.title">
            <VmGoodsCard 
                class="margin_right_10px goods__card-hover"
                width='230px' height='306px'
                :imgInfo="{
                    imgSrc: item.imgUrl,
                    width: `${item.price=='2499'?'230px':'142px'}`,
                    height: `${item.price=='2499'?'200px':'142px'}`,
                    fit: 'cover',
                    marginTop: `${item.price=='2499'?'2%':''}`
                }"
                :goodsInfo="{
                    title: item.title,
                    titleStyle: {
                        fontWeight: '700',
                        opacity: '1',
                        marginBottom: '10px',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: '80%',
                        marginTop: `${item.price=='2499'?'-2%':''}`
                    },
                    titleSpanStyle: {
                        fontWeight: '700',
                    },
                    tipsTag: item.tipsTag,
                    price: item.price,
                }"
            />
        </a>
    </ul>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import VmGoodsText from '@/components/vm-goods-part/vm-goods-text'
import VmGoodsCard from '@/components/vm-goods-part/vm-goods-card'
import { getHotRecommend } from '@/api/home'

export default {
  name: 'HotRecommendPart',
  components: {
    VmGoodsText,
    VmGoodsCard
  },
  setup () {
    const goodsData = ref([])
    const hotData = reactive({
        imgUrl: '',
        hrefUrl: ''
    })

    getHotRecommend().then(data => {
        goodsData.value = data.data
        hotData.imgUrl = data.hotData.imgUrl
        hotData.hrefUrl = data.hotData.hrefUrl
    })
    return { goodsData, hotData}
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/goods-card.scss';

.hr-container {
    position: relative;
    top: -390px;
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

</style>